import styles from './styles/index.less';

var controller = new ScrollMagic.Controller();

intro();
svgTree();

function svgTree() {
	const s = Snap('#SvgGitTree');
	const playgroudWidth = 600;
	s.attr({
		viewbox: "0 0 600 400",
		style: "margin: auto; min-height: 400px; width: 100%;",
		display: "block"
	})

	const g = s.group();
	Snap.load('/assets/trees.svg', (fragment) => {
		g.append(fragment)
		animate()
	})

	function animate() {
		const tl = new TimelineMax()
		window.tl = tl;

		const easeOut = {
			transformOrigin: "50% 50%",
			// rotation: 360,
			scale: .1,
			attr: {
				opacity: 0,
			},
			ease: Bounce.easeOut
		}

		tl
		.from('#XMLID_1_', .5, easeOut)
		.staggerFrom("#XMLID_603_ .st0", 1, easeOut, 0.1)
		.from('#XMLID_74_,#XMLID_71_', .5, easeOut)
		.from('#XMLID_72_', .5, easeOut)
		.staggerFrom("#XMLID_614_ g", 1, easeOut, 0.1)
		.from('#XMLID_78_,#XMLID_315_', .5, easeOut)
		.from('#XMLID_73_', .5, easeOut)
		.staggerFrom("#XMLID_625_ *", 1, easeOut, 0.1)

		var scene = new ScrollMagic.Scene({
			triggerElement: "#GitTreesTrigger", 
			duration: 1200, 
			offset: -100
		})

		scene.setTween(tl)
					.addIndicators({name: "loop"}) // add indicators (requires plugin)
					.setPin("#SvgGitTree")
					.addTo(controller);
	}


}

function intro() {
	const s = Snap('#IntroSVG')
	const playgroudWidth = 400;
	s.attr({
		width: playgroudWidth,
		height: playgroudWidth,
		style: "margin: auto;"
	})

	// const bg = s.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", {
	//     x: 10,
	//     y: 20,
	//     dim: { // dimension
	 //        width: 100,
	 //        height: 100,
	 //        "negative width": -100
	 //    }
	// }))

	const size = 160;
	const halfSize = size / 2

	const group = s.group()
	group.transform("translate(200, 150)")

	const bg = s.rect(0, 0, size, size, 10, 10)
	
	bg.attr({
		fill: '#FF9800'
	})

	let m = new Snap.Matrix();
	m.rotate(45)
	m.translate(-halfSize, -halfSize)
	m = m.multLeft(1, 0, 0, 1.05, 0, 0) 
	// .scale(1, 1.05, 0, 0)

	bg.transform(m.toTransformString())

	const p0 = {
		x: -41,
		y: -80
	}

	const line = s.path(Snap.format("M{p0x},{p0y}L{p1x},{p1y}L{p2x},{p2y}M{p0x},{p0y}L{p3x},{p3y}", {
		p0x: p0.x,
		p0y: p0.y,
		p1x: 0,
		p1y: -36,
		p2x: 0,
		p2y: 60,
		p3x: 40,
		p3y: 0
	}))

	line.attr({
		stroke: "#fff",
		strokeWidth: 15,
		fill: "transparent",
		strokeLinecap: "round",
		strokeDasharray: 200,
    strokeDashoffset: 200
	})

	const c1 = s.circle(p0.x, p0.y, 6);
	c1.attr({
    fill: "white",
    stroke: "#ff9800",
    strokeWidth: 4,
    opacity: 0
	})

	const c2 = s.circle(0, -36, 6);
	c2.attr({
    fill: "white",
    stroke: "#94641d",
    strokeWidth: 4,
    opacity: 0    
	})

	const c3 = s.circle(0, -36, 6);
	c3.attr({
    fill: "white",
    stroke: "black",
    strokeWidth: 4,
    opacity: 0
	})

	group.add(bg, line, c1, c2, c3);

	const groupClone1 = group.clone()
	const groupClone2 = group.clone()


	// var c = s.circle(200, 260,10);

	groupClone1.attr({
		opacity: 0.2
	})

	groupClone1.transform('t200, 150, r15, 0, 118')

	groupClone2.attr({
		opacity: 0.1
	})

	groupClone2.transform('t200, 150, r30, 0, 118')


	//   1.5s
	// -----0
	// 0.4s -=1.5
	// --
	TweenLite.to(line.node, 1.5, {
		"stroke-dashoffset": 0,
		ease: Linear.easeNone,
		onStart: function() {
			console.log("line:", new Date())
		},
		onUpdate: function() {
			console.log("update")
		}
	})

	const tl = new TimelineMax()
		.to(c1.node, .5, {
			attr: {
				cx: 0,
				cy: -36,
			},
			opacity: 1,
			onStart: function() {
				console.log('c1:', new Date())
			},
			ease: Linear.easeNone,		
		})
		.to(c2.node, .5, {
			attr: {
				cx: 40,
				cy: 0,
			},
			opacity: 1,
			ease: Linear.easeNone,
			onStart: function() {
				console.log('c2:', new Date())
			},
		})
		.to(c3.node, .5, {
			attr: {
				cx: 0,
				cy: 60,
			},
			opacity: 1,
			ease: Linear.easeNone,
			onStart: function() {
				console.log('c3:', new Date())
			},
		})

}